<template>
  <div class="app-container customer-div" style="overflow-x: auto">
     <div style="min-width: 1200px">
        <el-row :gutter="20">
            <el-col :span="12">
             <el-card  shadow="never">
               <div slot="header" class="clearfix" >
                 <span>客户销量排行</span>
               </div>
               <div>
                 <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="selectTab1">
                   <el-menu-item index="my">我负责的</el-menu-item>
                   <el-menu-item index="share">共享（师徒）</el-menu-item>
                   <el-menu-item index="department">部门（军团）</el-menu-item>
                   <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
                 </el-menu>
                 <el-radio-group v-model="listQuery.analysisType" size="small" @change="handleSearchList" style="margin-top:20px;">
                   <el-radio-button label="month">按月</el-radio-button>
                   <el-radio-button label="quarter">按季</el-radio-button>
                   <el-radio-button label="year">按年</el-radio-button>
                 </el-radio-group>
                 <el-form :inline="true" :model="listQuery" size="mini" label-width="50px" style="margin-top:20px;">
<!--                   <el-form-item label="日期：">-->
<!--                     <yearPicker-->
<!--                       style="width:300px"-->
<!--                       ref="statisticPicker"-->
<!--                       @updateTimeRange="updateStatisticYear">-->
<!--                     </yearPicker>-->
<!--                   </el-form-item>-->
                   <el-form-item label="业务员：" label-width="70px">
                       <el-select style="width:100px" v-model="listQuery.userId" filterable clearable >
                         <el-option
                           v-for="item in userOptionList"
                           :key="item.userId"
                           :label="item.userName"
                           :value="item.userId">
                         </el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label-width="0px">
                     <el-button
                       @click="handleSearchList"
                       type="primary">
                       查询
                     </el-button>
                   </el-form-item>
                 </el-form>

<!--                 <div id="myChart" :style="{'height':'300px'}" ></div>-->
                 <!--数据列表-->
                 <div class="table-container">
                   <el-table
                     ref="multipleTable"
                     v-loading="listLoading"
                     :data="tableData"
                     border
                     style="width: 100%; margin-top: 20px">
                     <el-table-column  label="时间"  align="center" min-width="100">
                       <template slot-scope="scope">
                            {{scope.row.createTime}}
                       </template>
                     </el-table-column>
                     <el-table-column align="center" label="业务员" min-width="100">
                       <template slot-scope="scope">
                         {{scope.row.userName}}
                       </template>
                     </el-table-column>
                     <el-table-column label="客户编号" align="center" min-width="150">
                       <template slot-scope="scope">
                         <div>{{scope.row.customerNumber }}</div>
                         <!--是否有权限-->
                         <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
                       </template>
                     </el-table-column>
                     <el-table-column min-width="100" label="采购量" align="center">
                       <template slot-scope="scope">
                         {{scope.row.goodsNum}}
                       </template>
                     </el-table-column>
                   </el-table>
                 </div>
                 <div class="pagination-container">
                   <el-pagination
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     layout="total, sizes,prev, pager, next,jumper"
                     :current-page.sync="listQuery.pageNum"
                     :page-size="listQuery.pageSize"
                     :page-sizes="[10,15,20,50,100]"
                     :total="count">
                   </el-pagination>
                 </div>
               </div>
             </el-card>
           </el-col>
            <el-col :span="12">
              <el-card  shadow="never">
                <div slot="header" class="clearfix" >
                  <span>产品销量排行</span>
                </div>
                <div>
                  <el-menu :default-active="listQuery2.tab" class="el-menu-demo" mode="horizontal" @select="selectTab2">
                    <el-menu-item index="my">我负责的</el-menu-item>
                    <el-menu-item index="share">共享（师徒）</el-menu-item>
                    <el-menu-item index="department">部门（军团）</el-menu-item>
                    <el-menu-item index="all"  v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
                  </el-menu>
                  <el-radio-group v-model="listQuery2.analysisType" size="small" @change="handleSearchList2" style="margin-top:20px;">
                    <el-radio-button label="month">按月</el-radio-button>
                    <el-radio-button label="quarter">按季</el-radio-button>
                    <el-radio-button label="year">按年</el-radio-button>
                  </el-radio-group>
                  <el-form :inline="true" :model="listQuery2" size="mini" label-width="50px" style="margin-top:20px;">
<!--                    <el-form-item label="日期：">-->
<!--                      <yearPicker-->
<!--                        style="width:300px"-->
<!--                        ref="statisticPicker2"-->
<!--                        @updateTimeRange="updateStatisticYear2">-->
<!--                      </yearPicker>-->
<!--                    </el-form-item>-->
                    <el-form-item label="业务员：" label-width="70px">
                      <el-select style="width:100px" v-model="listQuery2.userId" filterable clearable >
                        <el-option
                          v-for="item in userOptionList"
                          :key="item.userId"
                          :label="item.userName"
                          :value="item.userId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label-width="0px">
                      <el-button
                        @click="handleSearchList2()"
                        type="primary">
                        查询
                      </el-button>
                    </el-form-item>
                  </el-form>

<!--                  <div id="myChart2" :style="{'height':'300px'}" ></div>-->
                  <!--数据列表-->
                  <div class="table-container">
                    <el-table
                      ref="multipleTable"
                      v-loading="listLoading2"
                      :data="tableData2"
                      border
                      style="width: 100%; margin-top: 20px">
                      <el-table-column  label="时间"  align="center" min-width="100">
                        <template slot-scope="scope">
                             {{scope.row.createTime}}
                        </template>
                      </el-table-column>

                      <el-table-column label="商品名称" align="center" min-width="150">
                        <template slot-scope="scope">
                          {{scope.row.goodsSn}}
                        </template>
                      </el-table-column>
                      <el-table-column min-width="100" label="销量" align="center">
                        <template slot-scope="scope">
                          {{scope.row.goodsNum}}
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="pagination-container">
                    <el-pagination
                      background
                      @size-change="handleSizeChange2"
                      @current-change="handleCurrentChange2"
                      layout="total, sizes,prev, pager, next,jumper"
                      :current-page.sync="listQuery2.pageNum"
                      :page-size="listQuery2.pageSize"
                      :page-sizes="[10,15,20,50,100]"
                      :total="count2">
                    </el-pagination>
                  </div>
                </div>
              </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px">
         <el-col :span="12">
           <el-card  shadow="never">
             <div slot="header" class="clearfix" >
               <span>业务员销量排行</span>
             </div>
             <div>
               <el-menu :default-active="listQuery3.tab" class="el-menu-demo" mode="horizontal" @select="selectTab3">
                 <el-menu-item index="my">我负责的</el-menu-item>
                 <el-menu-item index="share">共享（师徒）</el-menu-item>
                 <el-menu-item index="department">部门（军团）</el-menu-item>
                 <el-menu-item index="all"  v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
               </el-menu>
               <el-radio-group v-model="listQuery3.analysisType" size="small" @change="handleSearchList3" style="margin-top:20px;">
                 <el-radio-button label="month">按月</el-radio-button>
                 <el-radio-button label="quarter">按季</el-radio-button>
                 <el-radio-button label="year">按年</el-radio-button>
               </el-radio-group>
               <el-form :inline="true" :model="listQuery3" size="mini" label-width="50px" style="margin-top:20px;">
<!--                 <el-form-item label="日期：">-->
<!--                   <yearPicker-->
<!--                     style="width:300px"-->
<!--                     ref="statisticPicker3"-->
<!--                     @updateTimeRange="updateStatisticYear3">-->
<!--                   </yearPicker>-->
<!--                 </el-form-item>-->
                 <el-form-item label="业务员：" label-width="70px">
                   <el-select style="width:100px" v-model="listQuery3.userId" filterable clearable>
                     <el-option
                       v-for="item in userOptionList"
                       :key="item.userId"
                       :label="item.userName"
                       :value="item.userId">
                     </el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label-width="0px">
                   <el-button
                     @click="handleSearchList3()"
                     type="primary">
                     查询
                   </el-button>
                 </el-form-item>
               </el-form>

<!--               <div id="myChart3" :style="{'height':'300px'}" ></div>-->
               <!--数据列表-->
               <div class="table-container">
                 <el-table
                   ref="multipleTable"
                   v-loading="listLoading3"
                   :data="tableData3"
                   border
                   style="width: 100%; margin-top: 20px">
                   <el-table-column  label="时间"  align="center" min-width="100">
                     <template slot-scope="scope">
                          {{scope.row.createTime}}
                     </template>
                   </el-table-column>
                   <el-table-column align="center" label="业务员" min-width="100">
                     <template slot-scope="scope">
                       {{scope.row.userName}}
                     </template>
                   </el-table-column>

                   <el-table-column min-width="100" label="销售量" align="center">
                     <template slot-scope="scope">
                       {{scope.row.goodsNum}}
                     </template>
                   </el-table-column>
                 </el-table>
               </div>
               <div class="pagination-container">
                 <el-pagination
                   background
                   @size-change="handleSizeChange3"
                   @current-change="handleCurrentChange3"
                   layout="total, sizes,prev, pager, next,jumper"
                   :current-page.sync="listQuery3.pageNum"
                   :page-size="listQuery3.pageSize"
                   :page-sizes="[10,15,20,50,100]"
                   :total="count3">
                 </el-pagination>
               </div>
             </div>
           </el-card>
         </el-col>
       </el-row>
     </div>

  </div>
</template>

<script>
const defaultListQuery={
  "createDate" : [],  //时间
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  analysisType:'month',
  "pageNum"    : 1,
  "pageSize"   : 10
};
    import {agentProcessBillList,getOrderUsersList} from '@/api/partner'
    import {developTopSaleByCustomer ,developTopSaleByGoods ,developTopSaleByUser} from '@/api/company'
    import yearPicker from '@/views/components/yearPicker'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'

    export default {
        name: "saleReport",
        data(){
            return{
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              roles:store.getters.roles ? store.getters.roles : [],
              userOptionList:[],

              listQuery2: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData2: [],
              count2: 0,
              listLoading2: false,

              listQuery3: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData3: [],
              count3: 0,
              listLoading3: false,

            }
        },
        components : {yearPicker},
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),

          allCustomerGoodsLineAnalysis(){
            if(this.roles.indexOf("allCustomerGoodsLineAnalysis") != -1){
              return true
            }else{
              return false
            }
          },
        },
        created() {
            this.getUserOptionList()
            this.getList()
            this.getList2()
            this.getList3()
        },
        filters: {

        },
        methods:{
          selectTab1(key){
            this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
            this.listQuery.tab = key;
            this.handleSearchList()
          },
          selectTab2(key){
            this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery)),
            this.listQuery2.tab = key;
            this.handleSearchList2()
          },
          selectTab3(key){
            this.listQuery3 = JSON.parse(JSON.stringify(defaultListQuery)),
            this.listQuery3.tab = key;
            this.handleSearchList3()
          },
          //画产品销量排行
          draw1(x,y){
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            // 绘制图表
            myChart.setOption({
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
            });
          },
          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
              this.userOptionList = res;
            })
          },
          updateStatisticYear(val){
            this.listQuery.createDate = val
          },

          handleSizeChange(val){
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
          },
          handleCurrentChange(val){
            this.listQuery.pageNum = val;
            this.getList();
          },

          handleSearchList(){
            this.listQuery.pageNum = 1;
            this.getList();
          },

          //获取列表
          getList() {
            this.listLoading = true;
            developTopSaleByCustomer(this.listQuery).then(response => {
              this.tableData = response.list;
              this.count = response.count;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            });
          },


          updateStatisticYear2(val){
            this.listQuery2.createDate = val
          },

          handleSizeChange2(val){
            this.listQuery2.pageNum = 1;
            this.listQuery2.pageSize = val;
            this.getList2();
          },
          handleCurrentChange2(val){
            this.listQuery2.pageNum = val;
            this.getList2();
          },

          handleSearchList2(){
            this.listQuery2.pageNum = 1;
            this.getList2();
          },

          //获取列表
          getList2() {
            this.listLoading2 = true;
            developTopSaleByGoods(this.listQuery2).then(response => {
              this.tableData2 = response.list;
              this.count2 = response.count;
              this.listLoading2 = false;
            }).catch(()=>{
              this.listLoading2 = false;
            });
          },


          updateStatisticYear3(val){
            this.listQuery3.createDate = val
          },

          handleSizeChange3(val){
            this.listQuery3.pageNum = 1;
            this.listQuery3.pageSize = val;
            this.getList3();
          },
          handleCurrentChange3(val){
            this.listQuery3.pageNum = val;
            this.getList3();
          },

          handleSearchList3(){
            this.listQuery3.pageNum = 1;
            this.getList3();
          },

          //获取列表
          getList3() {
            this.listLoading3 = true;
            developTopSaleByUser(this.listQuery3).then(response => {
              this.tableData3 = response.list;
              this.count3 = response.count;
              this.listLoading3 = false;
            }).catch(()=>{
              this.listLoading3 = false;
            });
          },

        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
